<template>
  <!--
        certigier 权限
        type:file  上传文件  invalid固定方法file 传出去方法upFile
        type:file1  上传文件  invalid固定方法file 传出去方法upFile1
        type:more  下拉菜单  invalid固定方法down btnConfig[{同其他按钮一样配置}]下拉的按钮配置  下拉按钮传出去方法就是invalid配置的名称
        type:table 弹出table
        invalid中是的方法是组件传出去的方法  自定义方法名称
        disabled:true  需要选中数据才能操作的按钮  不需要不用配置disabled
        label   按钮的名称
    -->
  <div class="title_btn">
    <div class="title" v-show="title">{{ title }}</div>
    <!-- 列表按钮渲染 -->
    <ul :class="right ? 'btnsActive' : ''" class="btns">
      <li :class="right ? 'liActive' : ''" v-for="(item,index) in config" :key="index">
        <!-- 文件类型按钮 -->
        <template v-if="item.type == 'file'">
          <el-button type="info" :disabled="item.loading || item.disabled" @click="handleUpload(item)">
            {{ item.label }}
          </el-button>
        </template>
        <!-- 下拉菜单类型按钮 -->
        <template v-else-if="item.type == 'more'">
          <el-dropdown @command="down">
            <el-button type="info">
              {{ item.label }}
              <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="i.invalid" :disabled="i.disabled || i.certigier" :key="idx" v-for="(i, idx) in item.btnConfig">{{ i.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <!-- 弹出table类型按钮 -->
        <template v-else-if="item.type == 'table'">
          <el-popover placement="top" v-model="visible" trigger="manual" width="660">
            <div style="text-align:right">
              <i class="el-icon-close" style="color:#000" @click="visible = false"></i>
            </div>
            <v-table :checked="false" :details="false" :height="'270px'" :pageSize="pageSize" :right="true" :tableConfig="item.tableConfig" :tableData="tableData" :total="total" @amend="amend"
              @findData="getTableData" @getTableData="getTableData" @searhData="searhData"></v-table>
            <el-button @click="po(1,{});flag()" slot="reference" type="info" :disabled="item.loading || item.disabled"> {{ item.label }} </el-button>
          </el-popover>
        </template>
        <!-- 其它未定义类型按钮 -->
        <template v-else>
          <el-button @click="invoking(item.invalid)" type="info" :loading="item.loading" :disabled="item.loading || item.disabled">
            {{ item.label }}
          </el-button>
        </template>
      </li>
    </ul>
    <!-- 导入可视化 -->
    <v-importVisual :importTitle="importTitle" :importType="importType" :importUrl="importUrl" :downTemplate="downTemplate" :sheetKey="sheetKey" :importVisualDialogFlag.sync="importVisualDialogFlag"
      @handleDownErrorFile="handleDownErrorFile" @handleDownTemplate="$emit(downTemplate)" />
  </div>
</template>

<script type="text/ecmascript-6">
import table from './Table'
import importVisual from './ImportVisual'
import baseMixin from '@/mixins/BaseMixin'

export default {
  name: 'tableTitle',
  props: [
    'btnConfig',
    'title',
    'right',
    'tableSelectData'
    // 导入类型,例如：10301（商品导入）
    // "importType",
    // 导入接口，例如：importSku1（商品导入）
    // "importUrl",
    // 导入模板接口，例如：downloadSkuExcelFile（商品导入模板）
    // "templateUrl",
  ],
  mixins: [baseMixin],
  data() {
    return {
      visible: false,
      disabled: true,
      tableData: [],
      pageSize: 1,
      total: 1,
      tableSearhData: {},
      importVisualDialogFlag: false,
      importType: '',
      importUrl: '',
      downTemplate: '',
      importTitle: '',
      sheetKey: '',
      dateType: 0
    }
  },
  created() {},
  computed: {
    config() {
      if (this.btnConfig) {
        if (this.disabled == false) {
          for (let i = 0; i < this.btnConfig.length; i++) {
            if (!this.btnConfig[i].certigier) {
              if (this.btnConfig[i].disabled) {
                this.btnConfig[i].disabled = false
              }
              if (this.btnConfig[i].type == 'more') {
                this.btnConfig[i].btnConfig.forEach(item => {
                  if (item.disabled) {
                    item.disabled = false
                  }
                })
              }
            }
          }
        } else if (this.disabled == true) {
          for (let i = 0; i < this.btnConfig.length; i++) {
            if (!this.btnConfig[i].certigier) {
              if (this.btnConfig[i].disabled == false) {
                this.btnConfig[i].disabled = true
              }
              if (this.btnConfig[i].type == 'more') {
                this.btnConfig[i].btnConfig.forEach(item => {
                  if (item.disabled == false) {
                    item.disabled = true
                  }
                })
              }
            }
          }
        }
        return this.btnConfig
      }
      return []
    }
  },
  methods: {
    handleDownErrorFile(exceptionUrl) {
      this.$emit('handleDownErrorFile', exceptionUrl, this.importType)
    },
    flag() {
      this.visible = !this.visible
      console.log(this,'>>>>>>');
    },
    // 其它未定义类型按钮
    invoking(data) {
      if (this[data]) {
        this[data]()
      } else {
        this.$emit(data, this.tableSelectData)
      }
    },
    handleUpload(params) {
      console.log(params)
      if (!params.importType) {
        return this.$message.error('请配置导入文件类型code')
      }
      if (!params.importUrl) {
        return this.$message.error('请配置导入文件接口地址')
      }
      // if(!params.downTemplate){
      //   return this.$message.error("请配置上传文件模板下载接口地址")
      // }
      this.importTitle = this.title || params.title
      this.importType = params.importType
      this.importUrl = params.importUrl
      this.downTemplate = params.downTemplate
      this.importVisualDialogFlag = true
      this.sheetKey = params.sheetKey
    },
    file(e) {
      let form = new FormData()
      let file = e.target.files[0]
      let fileName = file.name.split('.')
      if (
        fileName[fileName.length - 1] === 'xls' ||
        fileName[fileName.length - 1] === 'xlsx'
      ) {
        form.append('file', file)
        this.$emit('upFile', form)
        this.$refs.referenceUpload[0].value = null
      } else {
        this.$message.error(this.$t('msg.msg1'))
      }
    },
    file1(e) {
      let form = new FormData()
      let file = e.target.files[0]
      let fileName = file.name.split('.')
      if (
        fileName[fileName.length - 1] === 'xls' ||
        fileName[fileName.length - 1] === 'xlsx'
      ) {
        form.append('file', file)
        this.$emit('upFile', form)
        this.$emit('upFile1', form)
        this.$refs.referenceUpload[0].value = null
      } else {
        this.$message.error(this.$t('msg.msg1'))
      }
    },
    down(command) {
      this.$emit(command, this.tableSelectData)
    },
    po(page, data) {
      this.$emit(
        'btnTableData',
        page,
        data,
        res => {
          this.visible = true
          this.tableData = res.page.list
          this.pageSize = res.page.pageSize
          this.total = res.page.total
        },
        this.tableSearhData
      )
    },
    amend(id) {
      this.$emit('poFill', this.tableData[id])
      this.visible = false
    },
    getTableData(page, data) {
      this.po(page, data)
    },
    searhData(data, up) {
      if (!up) {
        this.tableSearhData = data
      } else {
        this.tableSearhData = data
        this.po(1, this.tableSearhData)
      }
    }
  },
  mounted() {},
  components: {
    'v-table': table,
    'v-importVisual': importVisual
  },
  watch: {
    tableSelectData(data) {
      if (!data) return
      if (data.length == 0) {
        this.disabled = true
      } else {
        this.disabled = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title_btn {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .title {
    font-weight: 600;
    font-size: 1.2em;
  }
  .btns {
    display: flex;
    margin-left: 50px;
  }
  li {
    margin-right: 1em;
  }
}
</style>
